/* eslint-disable */
<template>
  <div class="passenger-container">
    <div class="passenger-title">市场交易统计-商户列表</div>
    <div class="passenger-select">
      <div class="passenger-select2">
        市场名称
        <span class="marketname">{{this.querydata.Name}}</span>
      </div>

      <div class="passenger-select2">
        <dateselect @listenEvent="dtfn" />
      </div>

      <div class="passenger-select2">
        <foottype @listenEvent="fofn" />
      </div>
    </div>
    <div class="passenger-num">
      <passnum>
        <template v-slot:header>经营户总数</template>
        <!-- {{this.statisdata.BusinessCount}} -->
        <countTo :num="(this.statisdata.BusinessCount)*1"></countTo>
      </passnum>

      <passnum>
        <template v-slot:header>交易总金额</template>
        <!-- ￥{{this.formatNum((this.statisdata.Sales/1000000).toFixed(2)+"")}} -->
        ￥
        <countTo :num="((this.statisdata.Sales/1000000).toFixed(2))*1"></countTo>
        <span class="unit" :class="{ show: isshow==false}">万元</span>
        <span class="unit" :class="{ show: isshow==true}">元</span>
      </passnum>

      <passnum>
        <template v-slot:header>交易总笔数</template>
        <!-- {{this.formatNum((this.statisdata.DocCount)+"")}} -->
        <countTo :num="(this.statisdata.DocCount)*1"></countTo>
      </passnum>

      <passnum>
        <template v-slot:header>交易总量</template>
        <!-- {{this.formatNum((this.statisdata.Weight/1000).toFixed(2)+"")}} -->
        <countTo :num="((this.statisdata.Weight/1000).toFixed(2))*1"></countTo>
        <span class="unit" :class="{ show: isshow2==false}">Kg</span>
        <span class="unit" :class="{ show: isshow2==true}">g</span>
      </passnum>
    </div>

    <div class="form">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="Name" label="商户名称"></el-table-column>
        <el-table-column prop="Sales" label="交易金额">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">{{( scope.row.Sales /100).toFixed(2)}}&nbsp;元</div>
          </template>
        </el-table-column>
        <el-table-column prop="DocCount" label="交易笔数"></el-table-column>
        <el-table-column prop="Weight" label="交易量">
          <template slot-scope="scope">
            <div
              slot="reference"
              class="name-wrapper"
            >{{ (scope.row.Weight /1000).toFixed(2)}}&nbsp;kg</div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="date.page"
        :page-sizes="pageSizes"
        :page-size="date.perPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import dateselect from "@/views/modules/dateselect";
import foottype from "@/views/modules/foottype";
import passnum from "@/views/modules/passnum";
import countTo from "@/views/modules/countTo";
export default {
  name: "translist",
  components: {
    dateselect,
    foottype,
    passnum,
    countTo
  },
  computed: {},
  data() {
    return {
      form: {},
      value1: "",
      tableData: [],
      statisdata: { BusinessCount: 0, Sales: 0, DocCount: 0, Weight: 0 },
      date: {
        marketId: 1,
        startDate: "2019-07-15",
        endDate: "2020-07-15",
        businessType: -1,
        perPage: 5,
        page: 1
      },
      pageSizes: [1, 5, 10, 20],
      totalCount: 1, //个数选择器
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
      count: 3,
      value1: "",
      value2: "",
      querydata: {},
      Typelist: [],
      isshow: true,
      isshow2: true
    };
  },
  created() {},
  mounted() {
    this.querydata = this.$route.query.id;
    // console.log(this.querydata);
    this.date.marketId = this.querydata.ID;
    this.getstatisbusiness();
    // this.getSearch();
    // this.radio2=this.Typelist[0].lable
    this.Typelist = JSON.parse(sessionStorage.getItem("Typelist"));
  },
  methods: {
    getstatisbusiness() {
      this.$store
        .dispatch("transaction/getstatisbusiness", this.date)
        .then(data => {
          if (data) {
            // console.log(data);
            this.statisdata = data;
            this.tableData = data.Items;
            this.totalCount = data.total;
            if (this.statisdata.Sales / 1000000 >= 1) {
              (this.statisdata.Sales = this.statisdata.Sales),
                (this.isshow = true);
            } else {
              (this.statisdata.Sales = this.statisdata.Sales * 10000),
                (this.isshow = false);
            }
            if (this.statisdata.Weight / 1000 >= 1) {
              (this.statisdata.Weight = this.statisdata.Weight),
                (this.isshow2 = true);
            } else {
              (this.statisdata.Weight = this.statisdata.Weight * 1000),
                (this.isshow2 = false);
            }
          } else {
            this.open4();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    onRadioChange2(val) {
      // console.log(val);
      this.date.businessType = val;
      this.getstatisbusiness();
    },

    open4() {
      this.$message.error("该市场不存在客流采集设备");
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.date.perPage = val;
      this.date.page = 1;
      this.getstatisbusiness();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.date.page = val;
      this.getstatisbusiness();
    },
    formatNum(strNum) {
      // console.log(strNum)
      if (strNum.length <= 3) {
        return strNum;
      }

      if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
        return strNum;
      }

      let a = RegExp.$1,
        b = RegExp.$2,
        c = RegExp.$3;

      let re = new RegExp();

      re.compile("(\\d)(\\d{3})(,|$)");

      while (re.test(b)) {
        b = b.replace(re, "$1,$2$3");
      }

      return a + "" + b + "" + c;
    },
    dtfn(param) {
      this.date.startDate = param.startDate;
      this.date.endDate = param.endDate;
      // console.log(this.date);
      this.getstatisbusiness();
    },
    fofn(param) {
      this.date.businessType = param.businessType;
      // this.date.endDate=param.endDate;
      // console.log(this.date);
      this.getstatisbusiness();
    }
  }
};
</script>

<style lang="scss" scoped>
.passenger {
  &-container {
    margin: 20px;
  }
  &-title {
    font-size: 18px;
    line-height: 46px;
    background: white;
    margin-bottom: 15px;
    padding-left: 15px;
  }
  &-body {
    margin-bottom: 20px;
  }
  &-select {
    font-size: 14px;
  }
}

.passenger-select {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
}

.passenger-select2 {
  margin-top: 8px;
}

.passenger-num {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  margin-bottom: 15px;
  background: #fff;
  text-align: center;
  padding: 20px;
}

.marketname {
  padding: 0;
  color: #333;
}
.form {
  background: #fff;
}
.unit {
  font-size: 20px;
  margin: 0;
  padding: 0;
}
.show {
  display: none;
}
::v-deep .el-table th {
 background: #e5e5e5;
}
::v-deep .el-table .cell {
  text-align: center;
}
</style>
